<template>
	<view>
		<!-- 自定义顶部导航 -->
		<uni-nav-bar background-color="#e32519" color="#fff" status-bar="true" :fixed="true" @clickLeft="clickNavLeft()"
			@clickRight="clickNavRight()">
			<!-- 导航栏左侧插槽 -->
			<view slot="left" style="display: flex;justify-content: space-between;">
				<image style="width: 110rpx;height: 50rpx;" src="../../static/xuexi.png"></image>
			</view>

			<!-- 右侧插槽 -->
			<view style="width: 25%; margin-left:75%;display: flex ;justify-content:space-between;">
				<u-icon color="white" size="22" name="account-fill"></u-icon>
				<u-icon color="white" size="22" name="plus"></u-icon>
			</view>
			<view slot="right"><text style="font-size: 16px;">我的</text></view>
		</uni-nav-bar>
		<!-- 搜索框 -->
		<u-search style="width: 90%;padding:18rpx 0 0 5%;" shape="round" :clearabled="true" placeholder="搜索"
			height="35"></u-search>
			<u-list-item>
				<u-avatar text="黄" customStyle="margin: 20px 5px 10px 30px"></u-avatar>
			
				<u-avatar text="陈" customStyle="margin: 20px 5px 10px 30px"></u-avatar>
			</u-list-item>

		<!-- 底部自定义导航-->
		<u-tabbar :value="value4" @change="name => value4 = name" :fixed="true" :placeholder="true"
			activeColor="#d81e06" :safeAreaInsetBottom="true">
			<!-- 强国通 -->
			<u-tabbar-item text="强国通" badge="3" @click="go1(text)">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/qgt2.png">
				</image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/qgt.png"></image>
			</u-tabbar-item>
			<!-- 百灵 -->
			<u-tabbar-item text="百灵" @click="go2()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/bl2.png"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/bl.png"></image>
			</u-tabbar-item>
			<!-- 中间图标 -->
			<u-tabbar-item @click="go3()">
				<image style="width: 80rpx;height: 80rpx;" slot="active-icon" src="../../static/tab.png"></image>
				<image style="width: 80rpx;height: 80rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tab_select.png"></image>
			</u-tabbar-item>
			<!-- 电视台 -->
			<u-tabbar-item text="电视台" @click="go4()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/dst2.png">
				</image>
				<image style="width: 40rpx;height:40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/dst.png"></image>
			</u-tabbar-item>
			<!-- 电台 -->
			<u-tabbar-item text="电台" @click="go5()">
				<image style="width: 40rpx;height: 40rpx;" slot="active-icon" src="../../static/tabbar/dt2.png"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../static/tabbar/dt.png"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value4: 0,
			}
		},
		methods: {
			go1() {
				uni.navigateTo({
					url: "../qgt/qgt"
				})
			},
			go2() {
				uni.navigateTo({
					url: "../bl/bl"
				})

			},
			go3() {
				uni.navigateTo({
					url: "../xuexi/xuexi"
				})
			},
			go4() {
				uni.navigateTo({
					url: "../dst/dst"
				})
			},
			go5() {
				uni.navigateTo({
					url: "../dt/dt"
				})
			},
			clickNavRight(){
				uni.navigateTo({
					url: "../qgt/me"
				})
				
			}

		}
	}
</script>

<style>

</style>
